<template>
  <div>
 <!-- ArtileItem -->
  <van-cell @click="toArtiledetail()">
 <!-- 上方标题 -->
  <template #title>
   <div class="title-box">
     <span>{{obj.title}}</span>
    <img v-lazy="obj.cover.images" class="thumb"
    v-if="obj.cover.type===1"/>
   </div>
   <!-- 中间图片 注意这个是在插槽的结构 -->
  <div class="thumb-box" v-if="obj.cover.type > 1">
    <img v-for="(arr,index) in obj.cover.images" :key="index" v-lazy="arr" class="thumb" />
  </div>
  <!-- 下方说明 -->
  </template>

  <template #label>
    <div class="label-box">
    <div>
    <span>作者{{obj.aut_name}}</span>
    <span>{{obj.comm_count}}评论</span>
    <span>发布日期{{obj.pubdate}}</span>
    </div>
    <van-icon name="cross" @click.stop="showfn" v-if="iscrossshow" />
    <!-- 一级反馈面板 -->
    <van-action-sheet
  v-model="firstshow"
  :actions="firstactions"
  cancel-text="取消"
  close-on-click-action
  @cancel="onCancel"
  @select="onfirstSelect"
  get-container="body"
/>
<!-- 二级反馈面板 -->
 <van-action-sheet
  v-model="secondshow"
  :actions="secondactions"
  cancel-text="返回"
  close-on-click-action
  @cancel="onCancel"
  @select="onsecondSelect"
  get-container="body"
/>
    </div>
  </template>
</van-cell>
  </div>
</template>

<script>
// import { Toast } from 'vant'
import { Mytitle } from '@/utils/Notify.js'
import { firstactions, secondactions } from '@/api/reports.js'
export default {
  props: {
    obj: {
      type: Object
    },
    iscrossshow: {
      type: Boolean,
      default: true
    }
    // 点击x有问题 怎么传???
  },
  data () {
    return {
      // 一级面板数据
      firstshow: false,
      firstactions: firstactions,
      // 二级面板数据
      secondshow: false,
      secondactions: secondactions
    }
  },
  methods: {
    //  点击取消按钮
    onCancel () {
    //   Toast('取消')
      Mytitle({ type: 'warning', message: '取消' })
    },
    // 点击icon x弹出反馈面板
    showfn () {
      this.firstshow = !this.firstshow
    },
    onfirstSelect (action) {
    //   action.name="反馈"
      if (action.name === '反馈垃圾内容') {
        this.firstshow = !this.firstshow
        this.secondshow = !this.secondshow
      } else if (action.name === '不感兴趣') {
        //   通知list index.js删除数组  掉接口
        this.$emit('firstaction', action, this.obj.art_id)
        // console.log(action)
      }
    },
    onsecondSelect (secondactions) {
      // action.name="其他问题"  action.value="0"
    //   console.log(secondaction)
      this.$emit('secondaction', secondactions, this.obj.art_id)
      this.firstshow = !this.firstshow
    //   console.log(secondactions)
    },
    // 跳转详情页
    toArtiledetail () {
      this.$router.push({
        path: `/article?aid=${this.obj.art_id}`
      })
    }
  }

}
</script>

<style scoped lang="less">
/* 标题样式 */
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* label描述样式 */
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 图片的样式, 矩形黄金比例：0.618 */
.thumb {
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

/* 三图, 图片容器 */
.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>
